<template>
    <div>
        <div style="padding: 15px;">
            <button-tab>
                <button-tab-item @on-item-click="consoleIndex()">今天</button-tab-item>
                <button-tab-item selected>本月</button-tab-item>
                <button-tab-item><span class="vux-reddot-s">本月</span></button-tab-item>
                <button-tab-item><span class="vux-reddot-s">所有</span></button-tab-item>
            </button-tab>
        </div>

        <v-chart ref="demo" :data="data">
            <v-scale x field="月份" />
            <v-scale y field="月均降雨量" />
            <!-- 设置分组间柱子的间距 -->
            <v-bar series-field="name" :adjust="{type: 'dodge',marginRatio: 0.05 }" />
            <v-tooltip show-value-in-legend />
        </v-chart>

        
    </div>
</template>


<script>
    import { ButtonTab, ButtonTabItem,VChart, VLine, VArea, VTooltip, VLegend, VBar, XButton, VScale } from 'vux'

    export default {
        components: {
            ButtonTab,
            ButtonTabItem,
            VChart,
            VLine,
            VArea,
            VTooltip,
            VLegend,
            VBar,
            XButton,
            VScale
        },
        methods: {
            consoleIndex () {
            console.log('click demo01', this.demo01)
            }
        },
        data () {
            return {
                demo01:0,
                data: [
                    { name: 'London', 月份: '1月', 月均降雨量: 18.9 },
                    { name: 'London', 月份: '2月', 月均降雨量: 28.8 },
                    { name: 'London', 月份: '3月', 月均降雨量: 39.3 },
                    { name: 'London', 月份: '4月', 月均降雨量: 81.4 },
                    { name: 'London', 月份: '5月', 月均降雨量: 47 },
                    { name: 'London', 月份: '6月', 月均降雨量: 20.3 },
                    { name: 'London', 月份: '7月', 月均降雨量: 24 },
                    { name: 'London', 月份: '8月', 月均降雨量: 35.6 },
                    { name: 'Berlin', 月份: '1月', 月均降雨量: 12.4 },
                    { name: 'Berlin', 月份: '2月', 月均降雨量: 23.2 },
                    { name: 'Berlin', 月份: '3月', 月均降雨量: 34.5 },
                    { name: 'Berlin', 月份: '4月', 月均降雨量: 99.7 },
                    { name: 'Berlin', 月份: '5月', 月均降雨量: 52.6 },
                    { name: 'Berlin', 月份: '6月', 月均降雨量: 35.5 },
                    { name: 'Berlin', 月份: '7月', 月均降雨量: 37.4 },
                    { name: 'Berlin', 月份: '8月', 月均降雨量: 42.4 }
                ]
            }
        }
    }
    
</script>

<style lang="scss" scoped>

</style>

